<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Title</title>
    <script src="../js/jquery-1.9.1.js"></script>
    <script src="../js/swiper-3.3.1.jquery.min.js"></script>
    <script src="../js/swiper.animate1.0.2.min.js"></script>
    <link href="../css/swiper.min.css" type="text/css" rel="stylesheet">
    <link href="../css/animate.min.css" type="text/css" rel="stylesheet">
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .four-slide{
        padding-left: 16px;
        width: 896px;
        height: 222px;
    }
    .swiper-container{
        width: 100%!important;
        height: 100%!important;
    }
    .swiper-wrapper{
        padding-top: 92px;
        width: 912px!important;
        height: 222px!important;
    }
    .swiper-slide{
        width: 912px!important;
        height: 222px!important;
    }
    .swiper-pagination-bullet {
        display: inline-block!important;
        margin-right: 6px!important;
        width: 14px!important;
        height: 14px!important;
        line-height: 14px!important;
        text-align: center!important;
        font-size: 14px!important;
        color: #e1515b;
        cursor: pointer!important;
        opacity: 1!important;
        background-color: transparent!important;
    }
    .swiper-pagination-bullet-active {
        color: #4c4743;
    }

    .swiper-pagination{
        text-align: right!important;
        bottom: 275px!important;
        left: 0!important;
        font-size: 14px!important;
    }
    .four-slide-img{
        float: left;
        margin: 0 16px;
        width: 262px;
        height: 222px;
        background-color: #f1f1f1;
    }
    .four-slide-img img{
        width: 262px;
    }
</style>
<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="four-slide">
                <div class="four-slide-img"><img src="../images/project-staff-21.png"></div>
                <div class="four-slide-img"><img src="../images/project-staff-21.png"></div>
                <div class="four-slide-img"><img src="../images/project-staff-21.png"></div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="four-slide">
                <div class="four-slide-img"><img src="../images/project-staff-21.png"></div>
                <div class="four-slide-img"><img src="../images/project-staff-21.png"></div>
                <div class="four-slide-img"><img src="../images/project-staff-21.png"></div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="four-slide">
                <div class="four-slide-img"><img src="../images/project-staff-21.png"></div>
                <div class="four-slide-img"><img src="../images/project-staff-21.png"></div>
                <div class="four-slide-img"><img src="../images/project-staff-21.png"></div>
            </div>
        </div>
    </div>
    <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div>
</div>
</body>
<script language="javascript">
    var swiper = new Swiper('.swiper-container', {
        initialSlide: 0,
        speed: 300,
        autoplay: 5000,
        loop: true,
        paginationClickable: true,
        simulateTouch : false,
        pagination: '.swiper-pagination',
        paginationBulletRender: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
        }
    });
</script>
</html>